<template>
  <nut-config-provider :theme="theme">

    <nut-row>
      <nut-col :span="12">
        <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet(state.isVisible)" option-tag="name">
          <span><label>蓝牙:</label></span>
          <div v-html="state.val"></div>
        </nut-cell>
      </nut-col>
      <nut-col :span="12">
        <nut-cell :show-icon="true" :isLink="true" @click="switchChipletActionSheet(state.isVisible)">
          <span><label>芯片:</label></span>
          <div v-html="chipletState.val"></div>
        </nut-cell> </nut-col>
    </nut-row>
    <nut-row>
      <nut-col>
        <!-- <nut-button size="mini" type="primary" @click="showColorDialog">颜色选择</nut-button> -->
        <!-- <color-picker-dialog  :showDialog="colorState.isVisible"  @oncolorConfirm="colorChoose" @oncolorChange="selectColorChange" /> -->
        <color-picker class="color-picker"  v-model:colorData="colorData" :rpxRatio="rpxRatio"
          @changecolor="colorChange" />
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="24">
        <nut-cell-group title="光线亮度：" :style="{width:'100%'}">
          <nut-cell >
            <!-- <nut-range v-model="sliderValue" :max="255" :min="0" @change="sliederChange"></nut-range> -->
            <slider :style="{width:'100%'}" class="myslider" step="1" :value="sliderValue" :show-value="true" min="0" max="255" @change="sliederChange"/>

          </nut-cell>
        </nut-cell-group>
      </nut-col>
    </nut-row>

    <nut-row>
      <nut-col>
        <nut-cell-group>
          <nut-cell>
            <nut-button size="large" type="primary">读取</nut-button>
          </nut-cell>
        </nut-cell-group>
      </nut-col>
      <nut-col>
        <nut-cell-group >
          <nut-cell>
            <nut-button size="large" type="primary" @click="subButton">写入</nut-button>

          </nut-cell>
        </nut-cell-group>
      </nut-col>
    </nut-row>

    <nut-action-sheet v-model:visible="state.isVisible" cancel-txt="取消" :menu-items="columns" @choose="chooseItem"
      @change="actionSheetChange">


    </nut-action-sheet>

    <nut-action-sheet v-model:visible="chipletState.isVisible" cancel-txt="取消" :menu-items="columnsChiplets"
      @choose="chooseChipletItem" />

  </nut-config-provider>
</template>

<script >
import { ref, reactive,nextTick } from 'vue'
// import {  Toast } from '@nutui/nutui-taro'
// import '@nutui/nutui-taro/dist/packages/toast/style'
import Taro, { Events, useLoad, useReady } from '@tarojs/taro'
import { BLEInit, closeBLEAdapter, createBLEConnection, writeBLECharacteristicValue } from '../../util/BLEUtils'
import BLEconst from "../../util/BLEconstUtils"
import './index.scss'

export default {
  name: "index",
  components: {
  },
  beforeCreate() {
    console.log('beforeCreate');
    const obj = this;

    
      //设置rpxRatio
      Taro.getSystemInfo({
        success(res) {

          obj.rpxRatio = res.screenWidth / 750

        }
      })
  },
  onLoad(e) {
    console.log('onLoad');
    

    if (e.colorData) {
        let colorDataObj = JSON.parse(e.colorData)
        // colorData = colorDataObj
        this.colorData.pickerData = colorDataObj.pickerData
        this.colorData.hueData = colorDataObj.hueData
        this.colorData.barY = colorDataObj.barY
      }
      console.log(this)
      if (e.state) {
        console.log(e.state)
        let stateObj = JSON.parse(e.state)
        this.state.isVisible = stateObj.isVisible
        this.state.val = stateObj.val
      }
      if (e.sliderValue) {
        console.log(e.sliderValue)
        this.sliderValue = parseInt(e.sliderValue)
      }


  },

  mounted() { console.log('onMounted'); },
  unmounted() {
    console.log('onUnmounted');
    // closeBLEAdapter()

  },
  setup(props) {

    // const colorState =  reactive({
    //   isVisible: false,
    //   val: '',

    // });

    // const colorChoose =(e)=>{
    //   console.log(e)
    // }
    // const selectColorChange = (e)=>{

    //   console.log(e)
    // }
    // const showColorDialog = () => {
    //   colorState.isVisible = !colorState.isVisible

    // }


    let colorData = reactive({
      //基础色相，即左侧色盘右上顶点的颜色，由右侧的色相条控制
      hueData: {
        colorStopRed: 255,
        colorStopGreen: 0,
        colorStopBlue: 0,
      },
      //选择点的信息（左侧色盘上的小圆点，即你选择的颜色）
      pickerData: {
        x: 0, //选择点x轴偏移量
        y: 480, //选择点y轴偏移量
        red: 0,
        green: 0,
        blue: 0,
        hex: '#000000'
      },
      //色相控制条的位置
      barY: 0
    })
    let subcomitData = { chiplet: "ws2811", red: "0", blue: "0", green: "0", light: "255" }

    const rpxRatio = ref(1) //此值为你的屏幕CSS像素宽度/750，单位rpx实际像素

    useLoad((e) => {
      console.log("Loading")
      console.log(e)






    })

    const colorChange = (e) => {
      //返回的信息在e.detail.colorData中
      // this.setData({
      // colorData = e.detail.colorData
      // })
      subcomitData.red = e.detail.colorData.pickerData.red
      subcomitData.blue = e.detail.colorData.pickerData.blue
      subcomitData.green = e.detail.colorData.pickerData.green
      colorData.pickerData = e.detail.colorData.pickerData
      colorData.hueData = e.detail.colorData.hueData
      colorData.barY = e.detail.colorData.barY
      subcomitData.colorData = e.detail.colorData

      writeBLECharacteristicValue(subcomitData)



      console.log(e); // {hex: '#ddd8c3', rgba: 'rgba(221,216,195,0.5849)'}
    }
    const subButton = () => {

      writeBLECharacteristicValue(subcomitData)

    }


    const state = reactive({
      isVisible: false,
      val: '',

    });

    const chipletState = reactive({
      isVisible: false,
      val: '',

    });



    const columns = ref([
      { name: '没有获取任何数据，请点击刷新', value: 'noData', isNoData: 1, loading: true }
    ]);
    const columnsChiplets = ref([
      { name: 'ws2811', value: 'ws2811' },
      { name: 'tm1814', value: 'tm1814' },
      { name: 'tm1914', value: 'tm1914' },
    ]);


    const switchActionSheet = (param) => {

      state.isVisible = !param;
      if (state.isVisible == true) {
        BLEInit(columns)

      }
    };
    const chooseItem = (itemParams) => {

      console.log(itemParams)

      state.isVisible = false

      createBLEConnection(itemParams.deviceId, itemParams, state, colorData, sliderValue)


    };

    const switchChipletActionSheet = (param) => {
      chipletState.isVisible = !param;
    };
    const chooseChipletItem = (itemParams) => {
      chipletState.val = itemParams.name;
    };


    const actionSheetChange = () => {
      console.log(state.isVisible)

    }



    const sliderValue = ref(255);
    const sliederChange = (value) => {
      const hardObj = Taro.getStorageSync(BLEconst.HARDWARE_KEY)
      console.log(colorData)

      if (hardObj.colorData && hardObj.colorData != null) {

        subcomitData.colorData = colorData
      }

      subcomitData.red = colorData.pickerData.red
      subcomitData.blue = colorData.pickerData.blue
      subcomitData.green = colorData.pickerData.green


      subcomitData.light = value.detail.value
      writeBLECharacteristicValue(subcomitData)

    };



 

    


    return {
      // colorState,
      // showColorDialog,
      // colorChoose,
      // selectColorChange,
      chipletState,
      state,
      colorData,
      rpxRatio,
      columns,
      columnsChiplets,
      sliderValue,
      chooseItem,
      switchActionSheet,
      switchChipletActionSheet,
      chooseChipletItem,
      colorChange,
      sliederChange,
      actionSheetChange,
      subButton
    }

  }
}
</script>
<style lang="scss" scoped>
.myslider{
  width:100%;
}
</style>
